{include file="public/header" /}
<link rel="stylesheet" href="/static/admin/css/base.css" media="all">
<style>
    html {
        background-color: #f2f2f2 !important;
    }
    .m-table {
        background-color: rgb(255, 255, 255);
        /*margin-top: 5px;*/
        display: none;
        z-index: 1005;
        position: absolute;
        width: 100%;
        /*max-width: 80%;*/
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }

    #mTable_choose {
        margin: 0 !important;
    }

    .layui-table table tr:hover, .layui-table-hover {
        background-color: #FFF9E6 !important;
    }
</style>
<body>
<div class="layui-fluid layui-anim-fadein">
    <div class="layui-card layui-col-xs12 layui-col-sm12 layui-col-md12">
        <div style="height: 10px"></div>
        <div class="layui-card-body" style="padding-right: 2% !important;">
            <form class="layui-form" action="{:url('save')}" id="form">
                <input type="hidden" name="id" value="{$info?$info.id:''}"/>

                <!--<div class="layui-form-item">
                    <label class="layui-form-label">跳转类型</label>
                    <div class="layui-input-inline">
                        <select id="type" name="link_type" lay-verify="required" lay-filter="link_type" lay-reqtext="请选择类型" lay-verType="tips">
                            <option value="">请选择</option>
                            <option value="1" {if isset($info) && $info.link_type==1}selected{/if}>商品</option>
                        </select>
                    </div>
                </div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="input" name="title" value="{$info?$info.title:''}" class="layui-input"/>
                    </div>
                </div>


                <div class="layui-form-item uploadImageBox">
                    <label class="layui-form-label">图标</label>

                    <div class="layui-input-block">
                        <div class="layui-tab-item layui-show" style="width: 260px;">
                            <div class="layui-upload-drag uploadImage">
                                <i class="layui-icon"></i>
                                <p>点击上传，或将文件拖拽到此处</p>
                                <div>
                                    <hr>
                                    <img src="{$info?$info.image:''}"  class="layui-upload-img showImage" alt="上传成功后渲染" style="max-width: 50%">
                                    <input type="hidden" name="image" value="{$info?$info.image:''}" class="inpImage"  lay-verify="required" lay-reqtext="请上传图标" />
                                </div>
                            </div><input class="layui-upload-file" type="file" accept="" name="file">
                        </div>

                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">跳转类型</label>
                    <div class="layui-input-inline">
                        <select id="link_type" name="link_type" lay-filter="link_type" lay-reqtext="请选择跳转类型" lay-verType="tips">
                            <option value="1" {if !$info || ($info && $info.link_type==1)}selected{/if}>不跳转</option>
                            <option value="2" {if $info && $info.link_type==2}selected{/if}>分类</option>
                            <option value="3" {if $info && $info.link_type==3}selected{/if}>商品</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item cates" {if !$info || $info.link_type!=2}style="display: none;"{/if} data-url="{:url('ProductCate/getCate')}">
                    <label class="layui-form-label">所属分类</label>
                    <div class="layui-input-inline">
                        <select name="cate_1" id="cate_1" lay-filter="cate_1" lay-reqtext="请选择所属分类">
                            <option value="">请选择</option>
                            {foreach name="cates" item="vo"}
                            <option value="{$vo.id}" {if isset($info) && isset($info.cate_1) && $info.cate_1 == $vo.id}selected{/if}>{$vo.title}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select data-id="{$info?$info.cate_2:''}" id="cate_2" name="cate_2" lay-filter="cate_2" lay-reqtext="请选择所属分类"></select>
                    </div>
                    <div class="layui-input-inline">
                        <select data-id="{$info?$info.cate_3:''}" id="cate_3" name="cate_3" lay-filter="cate_3" lay-reqtext="请选择所属分类"></select>
                    </div>
                </div>

                <div class="layui-form-item products" {if !$info || $info.link_type!=3}style="display: none;"{/if}>
                <label class="layui-form-label">跳转商品</label>
                    <div class="layui-input-block">
                        <select id="product_id" name="product_id" lay-filter="product_id" lay-reqtext="请选择商品" lay-verType="tips">
                            <option value="">请选择商品</option>
                            {foreach name="$products" item="vo"}
                            <option value="{$vo.id}" {if $info && $info.link_type == 3 && $info.link_id == $vo.id}selected{/if}>{$vo.title}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item" style="text-align: center">
                    <div class="layui-input-block">
                        <button class="layui-btn recharge" lay-filter="save" lay-submit formObj="#form">确定
                        </button>
                    </div>
                </div>

            </form>
        </div>

    </div>
</div>
</body>
{include file="public/footer" /}
<script>
    layui.use(['form', 'table'], function () {
        table = layui.table;
        mTable_wrap_choose = $('#mTable_wrap_choose');
        form = layui.form;

        form.on('select(link_type)', function (data) {
            if (data.value == 2) {
                $('.cates').show();
                $('.products').hide();
            } else if(data.value == 3){
                $('.products').show();
                $('.cates').hide();
            }else{
                $('.cates').hide();
                $('.products').hide();
            }
        });

        //监听表单提交
        form.on('submit(save)', function (data) {
            layer.load();
            var btn = $(this);
            btn.attr('disabled', true);
            formObj = $($(this).attr('formObj'));
            url = formObj.attr('action');
            $.ajax({
                type: 'POST',
                url: url,
                data: formObj.serialize(),
                dataType: "json",
                success: function (data) {
                    layer.closeAll();
                    if (data.code == 1) {
                        notify.success(data.msg, 1500, function () {
                            let index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.window.location.reload();
                        });
                    } else {
                        notify.error(data.msg);
                        btn.removeAttr('disabled');
                    }
                },
                error(e) {
                    layer.closeAll();
                    btn.removeAttr('disabled');
                }
            });
            return false;
        })

        var cate_1 = $("#cate_1").val();
        if (cate_1) {
            createSelect($("#cate_2"), cate_1);
            createSelect($("#cate_3"), '{$info?$info.cate_2:""}');
        }
        form.on('select(cate_1)', function (data) {
            if (data.value) {
                createSelect($("#cate_2"), data.value);
            }
            $("#cate_2").html('<option value="">请选择</option>');
            $("#cate_3").html('<option value="">请选择</option>');
            form.render();
        });
        form.on('select(cate_2)', function (data) {
            if (data.value) {
                createSelect($("#cate_3"), data.value);
            }
            $("#cate_3").html('<option value="">请选择</option>');
            form.render();
        })

        function createSelect(obj, id) {
            $.get('{:url("ProductCate/getCate")}', {id: id},
                function (data) {
                    var options = '<option value="">请选择</option>';
                    $.each(data, function (i) {
                        var selected = obj.attr('data-id') == data[i]['id'] ? 'selected' : '';
                        options += '<option value="' + data[i]['id'] + '" ' + selected + '>' + data[i]['title'] + '</option>';
                    })
                    obj.html(options);
                    form.render();
                }, 'json'
            )
        }

    });
</script>

<!--<script>
    layui.use(['form', 'table', 'form'], function () {
        table = layui.table;
        mTable_wrap_choose = $('#mTable_wrap_choose');
        form = layui.form;
        $("#choose").on("input", function (e) {
            $(".account_val").val('');
            var value = e.delegateTarget.value;
            if (!value) {
                mTable_wrap_choose.hide();
                return false;
            }
            table.render({
                elem: '#mTable_choose'
                , id: 'mTable_choose'
                , url: '{:url("ad/selectProduct")}?val=' + value + '&type=get'
                , even: true
                , size: 'sm'
                , cols: [[
                    {field: 'id', title: 'ID'}
                    , {field: 'title', title: '商品名称'}
                ]]
                , page: true
            });
            mTable_wrap_choose.show();
        });

        //触发行单击事件
        table.on('row(mTable_choose)', function (obj) {
            if (!obj.data.id) return false;
            mTable_wrap_choose.hide();
            $("#foreign_id").val(obj.data.id);
            $("#title").val(obj.data.title);
            $("#choose").val(obj.data.title);
        });

    });
</script>-->
</html>